<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link href="css/bootstrap.min.css?v=3.3.6"
	th:href="@{/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet">
<link href="/css/font-awesome.css?v=4.4.0"
	th:href="@{/css/font-awesome.css?v=4.4.0}" rel="stylesheet">
	<style type="text/css">
		* {
			font-family: HP Simplified Light, "microsoft yahei";
		}
		img{
			border-radius: 50%;
			width: 4em;
		}
		.info{
			padding:0px 10px;
			margin-top: 18px;
			display:flex;
			flex-direction: row;
			/*justify-content: center;*/
			align-items: center;
		}
		.detail{
			margin-left: 10px;
			display:flex;
			flex-direction: column;
		}
		a{
			color: #0096D6;
			text-decoration: underline;
			text-underline: #0096D6;
		}
		a:hover{
			color: #0096D6;
			cursor: pointer;
			text-decoration: underline;
			text-underline: #0096D6;
		}
		button{
			margin: 36px 0 0 10px;
			width: 65px;
			height: 26px;
			border: 1px solid #CCCCCC;
			border-radius: 2px;
			background: #FFFFFF;
			color: #666;
			cursor: pointer;
			font-family: HP Simplified Regular, "microsoft yahei";
		}
		button:hover{
			border-color: #0096D6;
			color:white;
			background: #0096D6;
		}
	</style>
</head>
<body>
	<div class="info">
		<img src="/img/approval/user_icon.jpg"/>
		<div class="detail">
			<span id="uname">Liuxiaodong</span>
			<span id="ujob">Engineer</span>
			<span id="uurl"><a >Personal Information Settings ></a></span>
		</div>
		<button id="logoutBtn" onclick="logout()">Logout</button>
	</div>
	<!-- --------------------------------------------------------------->
	<script src="/js/jquery.min.js?v=2.1.4"></script>
	<script src="/js/ajax-util.js"></script>

	<script type="text/javascript" language="html">
		$().ready(function() {
			$("#password").focus();
			let animal = JSON.parse(sessionStorage.getItem("howAreYou"));
			$("#uname").text(animal.empNm);
			$("#ujob").text(animal.hrJobNm);
		});

		function logout() {
			parent.location.href = '/logout';
		}
	</script>
</body>
</html>